/*eslint-disable*/
function Circle (x, y, radius, color, options) {
  this.center_x = x// 在画布内随机生成x值
  this.center_y = y
  this.color = color
  this.options = options
  this.radius = radius
  this.destoryed = false
  this.addNext = false
}
Circle.prototype.radiu = function () {
  if (this.radius >= 0.95 * this.center_x && !this.addNext) {
    this.options.lineArr.push(new Circle(this.center_x, this.center_y, this.center_x / 1.6, this.color, this.options))
    this.addNext = true
  }
  if (this.radius >= 1.15 * this.center_x && !this.destoryed) {
    this.destoryed = true
    this.options.startIndex++
  }
}
Circle.prototype.paint = function () {
  this.radius += 0.2 // 每一帧半径增加1
  this.options.context.beginPath()
  this.options.context.arc(this.center_x, this.center_y, this.radius, 0, Math.PI * 2)
  this.options.context.closePath()
  this.options.context.lineWidth = 0.5 // 线条宽度
  this.options.context.strokeStyle = this.color // 颜色
  this.options.context.stroke()
}

export function drawLines (drawing_elem, color) {
  if (drawLines.hasPaint) return
  drawLines.hasPaint = true

  var context = drawing_elem.getContext('2d')
  var center_x = drawing_elem.width / 2
  var center_y = drawing_elem.height / 2
  var radius = center_x / 1.6
  var options = {
    lineArr: [],
    startIndex: 0,
    context
  }
  //  创建
  function paintCircle () {
    for (let i = options.startIndex; i <= options.lineArr.length; i++) {
      let circleIns = options.lineArr[i]
      if (circleIns instanceof Circle && !circleIns.destoryed) {
        circleIns.paint()
        circleIns.radiu()
      }
    }
  };
  
  Circle.hasPaint = true
  // 创建构造函数Circle
  for (let i = 0; i < 3; i++) {
    let arr = [1, 1.2, 1.4]
    options.lineArr.unshift(new Circle(center_x, center_y, radius * arr[i], color, options))
  }

  (function render () {
    context.clearRect(0, 0, drawing_elem.width, drawing_elem.height)
    paintCircle()
    window.requestAnimationFrame(render)
  })()
}

export function drawMain (drawing_elem, startPercent, stopPercent, forecolor) {
  /*
      @drawing_elem: 绘制对象
      @percent：绘制圆环百分比, 范围[0, 100]
      @startPercent 绘制圆环起点百分比
      @stopPercent 绘制圆环结束点百分比
      @forecolor: 绘制圆环的前景色，颜色代码
  */
  var context = drawing_elem.getContext('2d')
  var center_x = drawing_elem.width / 2
  var center_y = drawing_elem.height / 2
  var rad = Math.PI * 2 / 100
  var radius = center_x / 1.6
  var speed = startPercent
  // 初始化圆环、扇形
  function init () {
    context.save()
    context.beginPath()
    context.lineWidth = ((document.documentElement.clientWidth / 750) * 2).toFixed(0)
    context.strokeStyle = forecolor
    context.arc(center_x, center_y, radius, -Math.PI / 2, -Math.PI / 2 + startPercent * rad, false) // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
    context.stroke()
    context.closePath()
    context.beginPath()
    context.fillStyle = forecolor
    context.globalAlpha = 0.1
    context.moveTo(center_x, center_y)
    context.arc(center_x, center_y, radius, -Math.PI / 2, -Math.PI / 2 + startPercent * rad, false)
    context.closePath()
    context.fill()
    context.restore()
  }

  function foregroundCircle (n) {
    context.save()
    context.strokeStyle = forecolor
    context.lineWidth = 4
    // 绘制运动圆环
    context.beginPath()
    context.arc(center_x, center_y, radius, -Math.PI / 2 + startPercent * rad, -Math.PI / 2 + n * rad, false) // 用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
    context.stroke()
    context.closePath()
    // 绘制圆点
    context.beginPath()
    context.fillStyle = forecolor
    var x0 = center_x + Math.sin(n * rad) * radius
    var y0 = center_y - Math.cos(n * rad) * radius
    context.moveTo(x0, y0)
    var r0 = 4
    context.arc(x0, y0, r0, 0, 2 * Math.PI, false)
    context.fill()
    context.closePath()
    context.restore()
  }
  // 绘制大扇形
  function bigFanShaped (n) {
    context.save()
    context.beginPath()
    context.fillStyle = forecolor
    context.globalAlpha = 0.1
    context.moveTo(center_x, center_y)
    context.arc(center_x, center_y, radius, -Math.PI / 2 + startPercent * rad, -Math.PI / 2 + n * rad, false)
    context.closePath()
    context.fill()
    context.restore()
  }

  // 绘制小扇形

  function smallFanShaped (n) {
    context.save()
    context.fillStyle = forecolor
    context.globalAlpha = 0.05
    context.beginPath()
    context.translate(center_x, center_y)
    if (n < 75) {
      if (n > 2) {
        context.rotate((n - 2) * rad)
      } else {
        context.rotate(n * rad)
      }
    } else if (n <= 98) {
      context.rotate((n + 4) * rad)
    } else {
      context.rotate(n * rad)
    }
    context.moveTo(0, 0)
    context.arc(0, 0, radius, -(Math.PI / 2 + Math.PI / 6), -Math.PI / 2, false)
    context.closePath()
    context.fill()
    context.restore()
  }

  // 绘制文字
  function text (n) {
    context.save() // save和restore可以保证样式属性只运用于该段canvas元素
    context.fillStyle = forecolor
    context.globalAlpha = 1
    /* var font_size = 36;
    context.font = font_size + "px sans-serif"; */
    var fontWidth = 24
    // 设置自适应的字体大小
    context.font = fontWidth + 'px sans-serif'
    var text_width = context.measureText(n.toFixed(0) + '%').width
    context.fillText(n.toFixed(0) + '%', center_x - text_width / 2, center_y + fontWidth / 2)
    context.restore()
  }

  // 执行动画
  (function drawFrame () {
    context.clearRect(0, 0, drawing_elem.width, drawing_elem.height)
    init()
    bigFanShaped(speed)
    smallFanShaped(speed)
    foregroundCircle(speed)
    text(speed)
    /* if(speed < stopPercent){
      window.requestAnimationFrame(drawFrame);
      speed += 0.5;
    }; */
  }())
}

